<template>
  <div>
    <div class="menu">
      <div class="item" :class="{active:activeIndex==item.id}" v-for="item in menu" :key="item.id" @click="change(item)">
        {{ item.name }}
      </div>
    </div>
    <component :is="com"></component>
  </div>
</template>
<script>
import Home from "./views/Home.vue";
import About from "@/views/About.vue";
import List from "./views/List.vue";
export default {
  components: {
    Home,
    About: About,
    List,
  },
  data() {
    return {
      activeIndex:1,
      menu: [
        { id: 1, name: "首页", com: Home },
        { id: 2, name: "关于", com: About },
        { id: 3, name: "列表", com: List },
      ],
      com: Home,
    };
  },
  methods: {
    change(item) {
      this.activeIndex  = item.id;
      this.com = item.com;
    },
    
  },
};
</script>
<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
  .menu{
    display: flex;
  }
  .menu .item{
    flex:1;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 40px;
  }
  .menu .active{
    background-color: red;
  }

</style>
